import 'package:flutter/material.dart';
import '../constants.dart' show Constants, AppStyles, AppColors;

import '../model/contacts.dart' show Contact, ContactsPageData;

class _ContactItem extends StatelessWidget {
  _ContactItem({
    @required this.avatar,
    @required this.title,
    this.groupTitle,
    this.onPressed,
  });

  final String avatar;
  final String title;
  final String groupTitle;
  final VoidCallback onPressed;

  bool get _isAvatarFromNet {
    return this.avatar.startsWith('http');
  }

  // final Contact _contact = ContactsPageData.mock().contacts[0];

  @override
  Widget build(BuildContext context) {
    // 左边的图标
    Widget _avatarIcon;
    if (_isAvatarFromNet) {
      _avatarIcon = Image.network(
        avatar,
        fit: BoxFit.cover,
      );
    } else {
      _avatarIcon = Image.asset(
        avatar,
        fit: BoxFit.cover,
      );
    }

    // 列表项主体部分
    Widget _button = Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(bottom: 5.0),
            child: Center(
              child: Container(
                // margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
                width: Constants.ContactAvatarSize,
                height: Constants.ContactAvatarSize,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(5.0),
                  child: _avatarIcon,
                ),
              ),
            ),
          ),
          SizedBox(
            width: 10.0,
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.fromLTRB(0, 16, 0, 16),
              child: Text(
                title,
              ),
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    width: Constants.DividerWidth,
                    color: const Color(AppColors.BorderColor),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );

    // 分组标签
    Widget _itemBody;
    if (this.groupTitle != null) {
      _itemBody = Column(
        children: <Widget>[
          Container(
            color: Color(AppColors.ContactGroupTitleBg),
            alignment: Alignment.centerLeft,
            child: Text(
              this.groupTitle,
              style: AppStyles.GroupTitleItemTextStyle,
            ),
          ),
          _button,
        ],
      );
    } else {
      _itemBody = _button;
    }

    return Container(
      padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
      child: _itemBody,
    );
  }
}

class ContactsPage extends StatefulWidget {
  @override
  _ContactsPageState createState() => _ContactsPageState();
}

class _ContactsPageState extends State<ContactsPage> {
  final ContactsPageData data = ContactsPageData.mock();
  final List<Contact> _contacts = [];
  // final List<Contact> _contacts = ContactsPageData.mock().contacts;
  final List<_ContactItem> _functionButtons = [
    _ContactItem(
      avatar: 'assets/images/xindepengyou.png',
      title: '新的朋友',
      onPressed: () {
        print('添加新朋友。');
      },
    ),
    _ContactItem(
      avatar: 'assets/images/qunliao.png',
      title: '群聊',
      onPressed: () {
        print('显示群聊列表。');
      },
    ),
    _ContactItem(
      avatar: 'assets/images/biaoqian.png',
      title: '标签',
      onPressed: () {
        print('显示标签列表。');
      },
    ),
    _ContactItem(
      avatar: 'assets/images/gongzhonghao.png',
      title: '公众号',
      onPressed: () {
        print('显示公众号列表。');
      },
    ),
  ];

  // 初始化
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // 链式调用
    _contacts
      ..addAll(data.contacts)
      ..addAll(data.contacts)
      ..addAll(data.contacts)
      ..addAll(data.contacts)
      ..addAll(data.contacts)
      ..addAll(data.contacts);
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        if (index < _functionButtons.length) {
          return _functionButtons[index];
        }
        int _ContactIndex = index - _functionButtons.length;
        Contact _contact = _contacts[_ContactIndex];
        return _ContactItem(
          avatar: _contact.avatar,
          title: _contact.name,
          groupTitle: _contact.nameIndex,
        );
      },
      itemCount: _contacts.length + _functionButtons.length,
    );
  }
}
